<template>
	<view class="package grid" style="padding:20rpx 0px 30rpx" v-if="methodList&&methodList.length>0">
		<view v-for="(item,index) in methodList" :key="index" class="column shop" @click="tabIndex(item.page)">
			<image :src="item.image" mode=""></image>
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { toPublish } from '@mqtt';
	import { District } from '@/gql/shop';
	import { ref } from 'vue';
	const methodList=ref([])
	init()
	function init(){
		const payload = {
		  query: District,
		};
		toPublish('ql/store/getMenu', payload, (obj: any) => {
		  const { get_menu_list } = obj.data;
		  methodList.value=get_menu_list
		});
	}
	function tabIndex(num){
		uni.navigateTo({
			url: num
		});
	}
</script>

<style scoped lang="less">
	.grid{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		.shop{
			width: 25%;
			margin-top: 15rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 5px;
			}
			text{
				font-size: 24rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #3B3B3B;
				margin-top: 5rpx;
			}
		}
	}
	
</style>